<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>工单工时数据报告</title>
    <script src="http://g.subaotec.com/fuao/ressources/static/js/jquery-2.1.0.js"></script>
    <script src="js/smartscale_3.0.min.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="css/survey-rest.css"/>
    <link rel="stylesheet" type="text/css" href="css/survey-all.css"/>

    <style type="text/css">
        .simplex-header {
            background-color: #f2f2f2;
            border-width: 1px;
            border-style: solid;
            border-color: #a2a2a2;;
            border-bottom: none;
            border-top-color: #dcdcdc;
        }

        .simplex-data-choose {
            width: 6.58666rem;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0.12rem;
        }

        .simplex-data-choose:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
        }

        .simplex-data-choose li {
            float: left;
            width: 30%;
            height: 0.6rem;
            line-height: 0.6rem;
            text-align: center;
            background-color: #fff;
            border-radius: 3px;
            border: 1px solid #acacac;
        }

        .simplex-data-choose .active {
            background-color: #199ed9;
            border: 1px solid #199ed9;
            color: #fff;
        }

        .simplex-header label {
            padding-left: 1.68rem;
        }

        #barSimplex,
        #pieSimplex {
            height: 6.3333rem;
        }

        .bar-title {
            padding-left: 1.68rem;
            margin: 0.1rem 0;
        }

        .bar-title a {
            color: #46a1cd;
            padding-left: 5px;
        }

        .bar-con {
            border-bottom: 1px solid #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
        }

        .simplex-data-choose {
            margin-top: 0.3rem;
        }

        .simplex-header a {
            border: 1px #199ed9 solid;
            padding: 2px 10px;
            border-radius: 2px;
            margin-left: 10px;
            color: #fff;
            background-color: #199ed9;
        }

        /*start全屏遮罩*/
        .simp-shadow-con {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
        }

        .simp-shadow-con .shadow {
            width: 100%;
            height: 100%;
            background-color: #333;
            filter: alpha(opacity=50);
            /*支持 IE 浏览器*/
            -moz-opacity: 0.50;
            /*支持 FireFox 浏览器*/
            -khtml-opacity: 0.5;
            /*webkit内核浏览器*/
            opacity: 0.50;
            /*支持 Chrome, Opera, Safari 等浏览器*/
        }

        .simp-shadow-con .hite {
            position: absolute;
            color: #fff;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            -moz-transform: translate(-50%, -50%);
            -webkit-transform: translate(-50%, -50%);
            font-size: 14px;
        }

        /*end全屏遮罩*/
    </style>
</head>

<body>
<div id="workSimplex" class="sur-content">
    <div class="simplex-header">
        <ul class="simplex-data-choose">
            <li v-for="(item,index) in chooseData" :class="{active:index==chooseActive}" @click="chooseSimplex(index)">
                {{item.title}}
            </li>
        </ul>
        <h3>{{ period }}</h3>
    </div>
    <div class="bar-con">
        <!--<div class="bar-title">
            工单完成率
            <a href="javascript:;">点击查看详情</a>
        </div>-->
        <div id="barSimplex" class="" style="margin: 10px 0;height: 300px;"></div>
    </div>
    <div class="bar-con">
        <!--<div class="bar-title">
            工单发单占比率
            <a href="javascript:;">点击查看详情</a>
        </div>-->
        <div id="pieSimplex" class="" style="height: 300px;"></div>
    </div>

    <!--抄表巡检发单数-->
    <div class="bar-con dailyCheck">
        <!--<div class="bar-title">
            工单发单占比率
            <a href="javascript:;">点击查看详情</a>
        </div>-->
        <div id="dailyCheckData" class="" style="height: 300px;"></div>
    </div>


    <!--维护保养发单数-->
    <div class="bar-con ppm">
        <!--<div class="bar-title">
            工单发单占比率
            <a href="javascript:;">点击查看详情</a>
        </div>-->
        <div id="ppmData" class="" style="height: 300px;"></div>
    </div>


    <!--维修管理发单数-->
    <div class="bar-con mr">
        <!--<div class="bar-title">
            工单发单占比率
            <a href="javascript:;">点击查看详情</a>
        </div>-->
        <div id="mrData" class="" style="height: 300px;"></div>
    </div>

    <!--任务工单发单数-->
    <div class="bar-con task">
    <!--&lt;!&ndash;<div class="bar-title">-->
        <!--工单发单占比率-->
        <!--<a href="javascript:;">点击查看详情</a>-->
    <!--</div>&ndash;&gt;-->
    <div id="taskData" class="" style="height: 300px;"></div>
    </div>

    <!--电器组人员工时-->
    <!--<div class="bar-con">-->
    <!--<div id="dqGongShiData" class="" style="height: 300px;"></div>-->
    <!--</div>-->

    <!--电气组人员接单数-->
    <!--<div class="bar-con">-->
    <!--<div id="dquserNumData" class="" style="height: 300px;"></div>-->
    <!--</div>-->


    <!--描述：全屏遮罩 -->
    <!--<div v-show="shadowFlag" class="simp-shadow-con">
        <div class="shadow"></div>
        <div class="hite">
            正在加载数据,请稍等……
        </div>
    </div>-->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue" type="text/javascript" charset="utf-8"></script>
<!--<script src="js/echartsbar.min.js" type="text/javascript" charset="utf-8"></script>-->
<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/layer_mobile/layer.js"></script>
<script type="text/javascript" src="js/asrs-loreg-path-0.0.1.js"></script>
<script type="text/javascript">

    /**
     * @return {string}
     */
    //获取传入参数
    function loadPageVar (sVar) {
        return decodeURI(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURI(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
    }

    //执行一个laydate实例

    //统计
    var colorArr = [
        '#f9356a', '#b8bede', '#06d7a0', '#04528a', '#fa5959', '#19abff', '#f175fc',
        '#f45821', '#ffe66d', '#4a1783', '#5e9add', '#70c0b3', '#bcf76e', '#ffa69e',
        '#a043ef', '#008372', '#21399d', '#574afd', '#e5ebe1', '#ffa969'];
    var enterpriseId=loadPageVar('enterpriseId');


    var workSimplex = new Vue({
        el: '#workSimplex',
        data: {
            chooseData: [{
                title: '周报'
            },
                {
                    title: '月报'
                },
                {
                    title: '季度报'
                }
            ],
            chooseActive: 1,
            type: 'month',
            date1: '',
            endSize: 100,
            shadowFlag: true, // 全屏遮罩
            period:''
        },
        methods: {
            chooseSimplex(index) {
                this.chooseActive = index;
                if (index == 0) {
                    this.type = 'week';
                } else if (index == 1) {
                    this.type = 'month';
                } else if (index == 2) {
                    this.type = 'quarter';
                }
                this.barSimplex();
            },
            endSizeJS(length) {
                var endSize1 = 100;
                if (length >= 20) {
                    endSize1 = 20;
                } else if (10 < length && length < 20) {
                    endSize1 = 50;
                } else {
                    endSize1 = 100;
                }
                return endSize1;
            },
            barSimplex() {

                var that = this;
                layer.open({
                    type: 2
                    , shadeClose: false
                    , content: '正在加载···'
                });

                setTimeout(function () {
                    REQUEST_POST("stat/dataReport.action", {
                        type: that.type,
                        startDate: that.date1,
                        enterpriseId: enterpriseId
                    }, function (data) {
                        if (data == null || data == undefined) {
                            return true;
                        } else {
                            var organizations = data.organizationArray;
                            // console.log("organizations:"+organizations.length);
                            for (var i = 0; i < organizations.length; i++) {
                                var id = organizations[i].id;
                                var name = "numData" + i;
                                var hoursName = "hoursData" + i;
                                that.dquserNumData(id, name);
                                that.dqGongShiData(id, hoursName);
                            }
                            that.period=data.period
                            console.log(data)
                            that.dataReport(data);
                            that.pieSimplex(data);
                            // that.othersData(data);
                            // 企业配置巡检模块
                            var dailyCheck = data.dailyCheckData;
                            if (dailyCheck != null && dailyCheck != undefined) {
                                $(".dailyCheck").show();
                                that.dailyCheckData(data);
                            } else {
                                $(".dailyCheck").hide();
                            }
                            // 企业配置维保模块
                            var ppm = data.ppmData;
                            if (ppm != null && ppm != undefined) {
                                $(".ppm").show();
                                that.ppmData(data);
                            } else {
                                $(".ppm").hide();
                            }
                            // 企业配置维修模块
                            var mr = data.mrData;
                            if (mr != null && mr != undefined) {
                                $(".mr").show();
                                that.mrData(data);
                            } else {
                                $(".mr").hide();
                            }
                            // 企业配置任务工单模块
                            var task = data.taskData;
                            if (task != null && task != undefined) {
                                $(".task").show();
                                that.taskData(data);
                            } else {
                                $(".task").hide();
                            }
                            layer.closeAll();
                            that.shadowFlag = false;
                            return false;
                        }
                    }, function (data) {
                        // alert(data.msg);
                        //layer.msg(data.msg);
                        return false;
                    });
                }, 100);


                //班组
                //GetJsonp("http://ufonline.com:6200/asrs/tyh5/"+this.type+"-nt.js");
                //GetJsonp("http://ufonline.com:6200/asrs/tyh5/"+this.type+"-dq.js");

            },
            dataReport(data) { // 数据报告

                bar = echarts.init(document.getElementById('barSimplex'));
                bar.showLoading();
                // var length = data.data[0].data.length;
                // var endSize=this.endSizeJS(length);

                option = {
                    title: {
                        text: '工单完成率(%)',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data: data.dataTitle,
                        orient: 'horizontal',
                        y: 'bottom',
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '25%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data.dataName
                    },
                    yAxis: [{
                        type: 'value'
                    },
                        {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            bottom: 45,
                            start: 0,
                            end: 100,
                            height:'6%'
                        }
                    ],
                    series: data.data
                };
                bar.setOption(option);
                bar.hideLoading();
            },
            pieSimplex(data) {
                pie = echarts.init(document.getElementById('pieSimplex'));
                pie.showLoading();
                option = {
                    title: {
                        text: '工单发单占比率(%)',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        y: 'bottom',
                        data: data.dataTitle
                    },
                    series: [{
                        name: '工单发单占比率',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '50%'],
                        data: data.pieData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }]
                };
                pie.setOption(option);
                pie.hideLoading();
            },
            dailyCheckData(data) { // 抄表巡检

                others = echarts.init(document.getElementById('dailyCheckData'));
                others.showLoading();
                // var length = data.dailyCheckData[0].data.length;
                // var endSize=this.endSizeJS(length);
                option = {
                    title: {
                        text: 'Daily Check 工单完成率(%)',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        y: 'bottom',
                        data: ['Daily Check', 'completion rate（%）']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '25%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.dataName,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    },
                        {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            bottom: 35,
                            start: 0,
                            end: 100
                        }
                    ],
                    series: data.dailyCheckData
                };
                others.setOption(option); //
                others.hideLoading();
            },
            ppmData(data) { //维保

                others = echarts.init(document.getElementById('ppmData'));
                others.showLoading();
                // var length = data.ppmData[0].data.length;
                // var endSize=this.endSizeJS(length);
                option = {
                    title: {
                        text: 'PPM 工单完成率(%)',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        y: 'bottom',
                        data: ['PPM', 'completion rate（%）']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '25%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.dataName,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    },
                        {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            bottom: 35,
                            start: 0,
                            end: 100
                        }
                    ],
                    series: data.ppmData
                };
                others.setOption(option);
                others.hideLoading();
            },
            mrData(data) {
                //维修
                others = echarts.init(document.getElementById('mrData'));
                others.showLoading();
                // var length = data.mrData[0].data.length;
                // var endSize=this.endSizeJS(length);
                option = {
                    title: {
                        text: 'M&R 工单完成率(%)',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        y: 'bottom',
                        data: ['M&R', 'completion rate（%）']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '25%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.dataName,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    },
                        {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            bottom: 35,
                            start: 0,
                            end: 100
                        }
                    ],
                    series: data.mrData
                };
                others.setOption(option);
                others.hideLoading();
            },
            taskData(data) {

                others = echarts.init(document.getElementById('taskData'));
                others.showLoading();
                // var length = data.taskData[0].data.length;
                // var endSize=this.endSizeJS(length);
                option = {
                    title: {
                        text: 'Others工单完成率(%)',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            crossStyle: {
                                color: '#999'
                            }
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        y: 'bottom',
                        data: ['Others', 'completion rate（%）']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '25%',
                        containLabel: true
                    },
                    xAxis: [{
                        type: 'category',
                        data: data.dataName,
                        axisPointer: {
                            type: 'shadow'
                        }
                    }],
                    yAxis: [{
                        type: 'value'
                    },
                        {
                            type: 'value',
                            min: 0,
                            max: 100,
                            axisLabel: {
                                formatter: '{value} %'
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            bottom: 35,
                            start: 0,
                            end: 100
                        }
                    ],
                    series: data.taskData
                };
                others.setOption(option);
                others.hideLoading();
            },
            dqGongShiData(id, name) {// 电器班组人员工时
                if (document.getElementById(name) == null) {
                    var div2 = document.createElement("div");
                    div2.setAttribute('class', 'bar-con');
                    document.getElementById('workSimplex').appendChild(div2);
                    var div3 = document.createElement("div");
                    div3.setAttribute('id', name);
                    div3.style.height = "300px";
                    div2.appendChild(div3);
                }
                bar = echarts.init(document.getElementById(name));
                bar.showLoading();

                var that = this;
                var data1 = {};
                REQUEST_POST("stat/getOrganizationHours.action", {
                    type: that.type,
                    organizationId: id,
                    enterpriseId: enterpriseId
                }, function (data) {
                    if (data == null || data == undefined) {
                        return true;
                    } else {
                        data1 = data;
                        return false;
                    }
                }, function (data) {
                    data1 = data;
                    return false;
                });

                var sizes = data1.data.length;
                var type = this.type;
                var gsCount = 0;
                if (type == 'week') {
                    gsCount = 5 * 480;
                } else if (type == 'month') {
                    gsCount = 22 * 480;
                } else if (type == 'quarter') {
                    gsCount = 66 * 480;
                }
                var length = data1.data[0].data.length;
                var endSize=this.endSizeJS(length);
                console.log("aaa",data1)
                var markLine = { //开始标预警线
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            lineStyle: {
                                type: 'dash',
                                color: '#333 ',
                                width: 2,
                            },
                            label: {
                                formatter: gsCount + '',
                                textStyle: {
                                    fontSize: 16,
                                    fontWeight: "bolder",
                                },
                            }
                        },
                    },
                    data: [
                        [{
                            coord: [data1.dataName[0], gsCount]
                        }, {
                            coord: [data1.dataName[length - 1], gsCount]
                        }]
                    ],

                };

                // data1.data[sizes-1].markLine = markLine

                option = {
                    title: {
                        text: data1.organizationName + '人员工时统计(小时)',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        y: 'bottom',
                        data: data1.dataTitle
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '25%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data1.dataName,
                        axisLabel: {
                            interval: 0,
                            rotate: 45,//倾斜度 -90 至 90 默认为0
                            margin: 2,
                            textStyle: {
                                fontWeight: "bolder",
                                color: "#000000"
                            }
                        }
                    },
                    yAxis: [{
                        type: 'value'
                    }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            bottom: 35,
                            start: 0,
                            end: endSize
                        }
                    ],
                    series: data1.data
                };
                bar.setOption(option);
                bar.hideLoading();
            },
            dquserNumData(id, name) {
                if (document.getElementById(name) == null) {
                    var div2 = document.createElement("div");
                    div2.setAttribute('class', 'bar-con');
                    document.getElementById('workSimplex').appendChild(div2);
                    var div3 = document.createElement("div");
                    div3.setAttribute('id', name);
                    div3.style.height = "300px";
                    div2.appendChild(div3);
                }
                bar = echarts.init(document.getElementById(name));
                bar.showLoading();

                var that = this;
                var data1 = {};
                REQUEST_POST("/allCharts/dashBoardCharts/getOrganizationReceiveNum.action", {
                    type: that.type,
                    organizationId: id,
                    enterpriseId: enterpriseId
                }, function (data) {
                    if (data == null || data == undefined) {
                        return true;
                    } else {
                        data1 = data;
                        return false;
                    }
                }, function (data) {
                    //layer.msg(data.msg);
                    data1 = data;
                    return false;
                });
                var length = data1.data[0].data.length;
                if (length == 0) {
                    return false;
                }
                var endSize=this.endSizeJS(length);
                option = {
                    title: {
                        text: data1.organizationName + '人员接单数（张）',
                        x: 'center'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    legend: {
                        orient: 'horizontal',
                        y: 'bottom',
                        data: data1.dataTitle
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '25%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: data1.dataName,
                        axisLabel: {
                            interval: 0,
                            rotate: 45,//倾斜度 -90 至 90 默认为0
                            margin: 2,
                            textStyle: {
                                fontWeight: "bolder",
                                color: "#000000"
                            }
                        }
                    },
                    yAxis: [{
                        type: 'value'
                    }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            bottom: 35,
                            start: 0,
                            end: endSize
                        }
                    ],
                    series: data1.data
                };
                bar.setOption(option);
                bar.hideLoading();
            },
            showLoading() {
                layer.open({
                    type: 2
                    , shadeClose: false
                    , content: '正在加载···'
                });

                this.barSimplex();
            },
            testData() {
            }
        },

        created: function () {

        },
        mounted: function () {
            this.showLoading();
            //this.barSimplex();
            //this.testData();
            //setTimeout(this.barSimplex(),200);

        }
    })

</script>

</html>